$color: #fff;
$banxin: 690rem;
$theme: #f8e24a;
* {
  padding: 0;
  margin: 0;
}
.explore {
    margin-bottom: 150rem;
  .explorehead {
    .centerhead {
      width: $banxin;
      display: flex;
      justify-content: space-between;
      // 头部
      margin-top: 90rem;
      margin-left: 35rem;
      span {
        font-size: 50rem;
        font-weight: 900;
        color: #fdfdfd;
      }
    }
  }
  .diantai {
    @keyframes explore{
      0% {
        background-image: linear-gradient(
          -225deg,
          #ff057c 0%,
          #8d0b93 50%,
          #321575 100%
        );
        transition: all 3;
      }
      20% {
        background-image: linear-gradient(
          -225deg,
          #ef057c 0%,
          #9d0b93 50%,
          #331575 100%
        );
        transition: all 3;
      }
      40% {
        background-image: linear-gradient(
          -225deg,
          #cf057c 0%,
          #ad0b93 50%,
          #341575 100%
        );
        transition: all 3;
      }
      60% {
        background-image: linear-gradient(
          -225deg,
          #bf057c 0%,
          #bd0b93 50%,
          #351575 100%
        );
        transition: all 3;
      }
      80% {
        background-image: linear-gradient(
          -225deg,
          #cf057c 0%,
          #ad0b93 50%,
          #341575 100%
        );
        transition: all 3;
      }
      100% {
        background-image: linear-gradient(
          -225deg,
          #ef057c 0%,
          #9d0b93 50%,
          #331575 100%
        );
        transition: all 3;
      }
    }
    
    .diantailist {
      width: 670rem;
      height: 340rem;
      display: flex;
      justify-content: start;
      align-items: center;
      box-sizing: border-box;
      background-color: #fff;
      padding: 30rem 0;
      // padding-left: 35rem;
      margin: 0 auto;
      margin-top: 35rem;
      border-radius: 10rem;
      // height: 200rem;
      // flex-direction: column;
      // overflow: hidden;
      animation: explore 20s infinite linear;
      overflow: hidden;
      overflow: auto;
      transition: 1s;
      position: relative;
      .list {
        width: 100%;
        height: 100%;

        box-sizing: border-box;

        // background-color: red;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        padding: 35rem;
        img {
          width: 50rem;
          height: 50rem;
        }

        .head {
          text-align: left;
          color: #fff;
          font-size: 40rem;
          font-weight: 700;
        }
        .usercomment {
          display: flex;
          flex-direction: column;
          justify-content: start;
          align-items: start;
          height: 100rem;
          margin-top: 30rem;
          .commenttop{
              display: flex;
              justify-content: start;
              align-items: center;
              img {
                width: 50rem;
                height: 50rem;
                border-radius: 50rem;
              }
              span {
                  margin-left: 20rem;
                font-size: 20rem;
                color: #fff;
                font-weight: 800;
              }
          }
          .commentbottom{
              margin-top: 30rem;
              span{
                  color: #fff;
                  font-weight: 500;
              }
          }
         
        }
        .commentnum{
            position: absolute;
            right: 50rem;
            bottom: 70rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            span{
                &:first-child{
                    font-size: 18rem;
                    font-weight: 900;
                    color: #fff;
                    font-weight: 600;
                }
                &:last-child{
                    font-size: 30rem;
                    margin-top: 2rem;
                    color: #8b8794;
                }
            }
        }
      }
    }
  }
  .dongtai{

  }
}
